<template>
  <div>
    <header-nav :navItem="navItem" @currentInfo="currentInfo"></header-nav>
    <keep-alive>
      <transition name="translateXFadeIn" mode="out-in">
        <component :is="currentComponent"></component>
      </transition>
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import headerNav from "./headerNav.vue";
import bodyHistory from "./bodyHistory/bodyHistory.vue";
import bodyCollect from "./bodyCollect/bodyCollect.vue";
import bodyInfomation from "./bodyInfomation/bodyInfomation.vue";
import bodyProduct from "./bodyProduct/bodyProduct.vue";
import { ref, computed } from "vue";
import { navItemType } from "@/type/mine";
const currentItemPath = ref<string>("information");
const navItem = ref<Array<navItemType>>([
  {
    name: "个人信息",
    path: "information",
    icon: "iconfont icongerenxinxi1",
  },
  {
    name: "点赞历史",
    path: "history",
    icon: "iconfont iconlishi",
  },
  {
    name: "个人收藏",
    path: "collect",
    icon: "iconfont iconshoucang",
  },
  {
    name: "我的痕迹",
    path: "product",
    icon: "iconfont iconchakanhenji",
  },
]);
const currentComponent = computed(() => {
  switch (currentItemPath.value) {
    case "history":
      return bodyHistory;
    case "collect":
      return bodyCollect;
    case "product":
      return bodyProduct;
    case "information":
      return bodyInfomation;
    default:
      return bodyInfomation;
  }
});
const currentInfo = (item: navItemType) => {
  currentItemPath.value = item.path;
};
</script>

<style>
@import url("../../css/comment/animate.css");
</style>
